<!-- RoomPrintView.vue -->
<template>
  <!-- 基础表格容器 -->
  <div class="table-container">
    <!-- 打印功能按钮 -->
    <!-- <button @click="handlePrint" class="print-btn">打印预约记录</button> -->

    <!-- H5原生表格实现 -->
    <table
      class="data-table"
      border
    >
      <thead>
        <tr>
          <th
            v-for="(header, index) in tableHeaders"
            :key="index"
          >{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(item, index) in tableData"
          :key="item.BX_RECORD_ID"
        >
          <!-- <td>{{ item.BX_RECORD_ID }}</td> -->
          <td>{{ item.NAME || '-' }}</td>
          <td>{{ formatDateTime(item.RECORD_TIME) }}</td>
          <!-- <td>{{ item.WORKID }}</td> -->
          <td>{{ item.CAPACITY }}</td>
          <td>{{ item.BX_BZ }}</td>
          <td>{{ item.DW }}</td>
          <td>{{ item.YCBM }}</td>
          <!-- <td :class="`status-${item.STATE}`">{{ stateMapping[item.STATE] }}</td> -->
          <!-- <td>{{ item.PUSH_TIME ? formatDateTime(item.PUSH_TIME) : '未推送' }}</td> -->
          <!-- <td>{{ item.SP_ID || '-' }}</td> -->
          <td>{{ item.LXR }}</td>
          <td>{{ item.PHONE }}</td>
          <td>{{ item.REAMRK }}</td>
          <!-- <td>{{ item.CBZX }}</td> -->
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import myAxios from '@/myAxios/myAxios';
import { onMounted, ref } from 'vue';

// 响应式表格数据（2025年最新语法）
const tableData = ref([
  // 示例数据（实际使用时替换为API数据）
  {
    BX_RECORD_ID: 'REC20250408001',
    BX_ID: 'VIP001',
    RECORD_TIME: '2025-04-08 09:30:00',
    WORKID: 'EMP1001',
    CAPACITY: 8,
    PHONE: '138-1234-5678',
    STATE: 'pending',
    REMAARK: '重要客户接待',
    SP_ID: 'MG2001',
    BX_BZ: 200,
    DW: '未来科技公司',
    LXR: '张经理',
    YCBM: '市场部',
    CBZX: '营销成本中心'
  }
]);

onMounted(() => {
  myAxios.get('陈帅廷查询包厢进行中记录', '').then((res) => {
    tableData.value = res;
  });
});

// 表格列头（2025年最新字段规范）
const tableHeaders = ref([
  //   '记录ID',
  '包厢',
  '预约时间',
  //    '工号',
  '人数',
  '消费标准',
  //    '状态',
  //     '推送时间',
  //   '审批人', 
  '客户名称',
  '用餐部门',
  '联系人',
  '联系方式',
  //   '成本中心',
  '备注',
]);

// 状态映射（包含2025年最新状态类型）
const stateMapping = {
  pending: '待审核',
  reviewed: '已审核',
  ongoing: '进行中',
  completed: '已完成',
  deleted: '已删除'
};

// 时间格式化（兼容2025年最新日期格式）
const formatDateTime = (timeString) => {
  return new Date(timeString).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 打印功能（2025年浏览器兼容方案）
const handlePrint = () => {
  window.print();
};
</script>

<style scoped>
/* 现代表格样式（2025年设计趋势） */
/* .table-container {
  overflow-x: auto;
  padding: 20px;
  background: #f8f9fa;
} */

.data-table {
  width: 100%;
  /* border-collapse: collapse; */
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  background: white;
}

.data-table th {
  background-color: #2c3e50;
  color: white;
  padding: 15px;
  text-align: center;
  font-weight: 600;
}

.data-table td {
  padding: 12px;
  border-bottom: 1px solid #ecf0f1;
}

.data-table tr:hover {
  background-color: #f8f9fa;
}

/* 状态标签样式 */
.status-pending {
  color: #e67e22;
}
status-reviewed {
  color: #3498db;
}
.status-ongoing {
  color: #2ecc71;
}
.status-completed {
  color: #95a5a6;
}
.status-deleted {
  color: #e74c3c;
}

/* 打印优化样式 */
@media print {
  .print-btn {
    display: none;
  }
  .table-container {
    padding: 0;
    background: none;
  }
  .data-table {
    box-shadow: none;
    font-size: 12pt;
  }
}
</style>